<template>
  <view class="forum-container">
    <!-- 标题和 发布按钮 -->
    <view class="forum-header">
      <view class="title">
        <uni-icons type="chatboxes-filled" size="22" color="#32e800"></uni-icons>
        <text>研讨室讨论区</text>
      </view>
      <view class="btn-publish">
        <button @click="goToPublish">发布</button>
      </view>
    </view>
    <!-- 每一条评论的卡片， 包装组件 -->
    <view class="forum-title">
      讨论区
      <span>（来加入一起分享吧！）</span>
    </view>
    <view class="list" v-if="forumList">
      <forumCard v-for="item in forumList" :key="item.id" jump="true" :forumDetail="item"></forumCard>
    </view>

    <!-- 提示信息弹窗 -->
    <uni-popup ref="message" type="message">
      <uni-popup-message :type="msgType" :message="tips" duration="2000"></uni-popup-message>
    </uni-popup>
  </view>
</template>

<script>
import forumCard from './components/forum-card.vue';
import { getForumListAsync, getUserInfoAsync } from '@/api/forum.js'
export default {
  components: {
    forumCard
  },
  data () {
    return {
      // 弹窗内容
      msgType: '',
      tips: '',
      forumList: []
    };
  },
  onLoad () {
    uni.$on('forum', (param) => {
      if (param.data === 1) {
        this.messageToggle('success', '发布成功！');
      } else if (param.data === 2) {

      }
      this.getForumList()
      this.$forceUpdate()
    });
    this.getForumList()

  },
  onshow () {
    this.getForumList()
  },
  onUnload () {
    uni.$off('forum');
  },

  methods: {
    // 跳转发布帖子页面
    goToPublish () {
      console.log(111);
      uni.navigateTo({
        url: '/subpackage/forum/forum-publish'
      });
    },
    // 弹窗弹出封装
    messageToggle (type, msg) {
      this.msgType = type;
      this.tips = msg;
      this.$refs.message.open();
    },
    // 获取帖子列表
    async getForumList () {
      try {
        const res = await getForumListAsync()
        this.forumList = res.data.data.map(item => {
          let date = item.createTime.split('T')[0]
          let time = item.createTime.split('T')[1]
          item.createTime = date.substring(5) + '  ' + time.substring(0, 5)
          getUserInfoAsync(item.userId).then(res => {
            item.userInfo = res.data.data
            this.$forceUpdate()
          })
          return item
        })

        console.log('%c [  ]-80', 'font-size:13px; background:pink; color:#bf2c9f;', this.forumList)
      } catch (error) {
        console.log('%c [  ]-76', 'font-size:13px; background:pink; color:#bf2c9f;', error)
      }
    }
  }
};
</script>

<style lang="scss">
.forum-container {
  width: 100%;
  padding-bottom: 40rpx;

  .forum-header {
    width: 95%;
    box-sizing: border-box;
    background-color: #fff;
    height: 90rpx;
    line-height: 90rpx;
    display: flex;
    margin: 0 auto;
    margin-top: 20rpx;
    border-radius: 10rpx;
    box-shadow: 2rpx 2rpx 10rpx 2rpx darkgray;
    justify-content: space-between;
    padding: 0 20rpx;

    .title {
      align-self: center;
      padding: 0 20rpx;

      text {
        margin-left: 10rpx;
      }
    }

    .btn-publish {
      align-self: center;

      button {
        border-radius: 25rpx;
        width: 200rpx;
        height: 60rpx;
        background-color: skyblue;
        color: #fff;
        font-size: 30rpx;
        line-height: 60rpx;
        box-shadow: 2rpx 2rpx 10rpx 2rpx darkgray;
      }
    }
  }

  .forum-title {
    margin-top: 40rpx;
    height: 60rpx;
    margin-left: 50rpx;
    font-size: 32rpx;
    font-weight: 700;
    color: #ee8916;

    span {
      color: #a5a5a5;
    }
  }

  .list {
    width: 95%;
    margin: 0 auto;
    margin-top: 20rpx;
  }
}
</style>